<template>
<video
                    autoplay
                    controls
                    width="100%"
                    height="155px"
                    muted
                :id="this.id"  ></video>
</template>

<script>
import flvjs from 'flv.js/dist/flv.min.js'
export default {
  name:'camera',
  data() {
    return {
      src:"",  //flv格式的地址
      timerId:null,
      loadStatus:true,
      id: 'videoElement'+Math.random(),
      statusMsg:'摄像机未开启，请联系'
    };
  },
 created(){
     if(this.timerId){
      clearInterval(this.timerId)
      this.timerId=null
    }
  },
   mounted() {
       this.setsrc();   

    },
  destroyed(){
    console.log("destorying video");
    if(this.timerId){
      clearInterval(this.timerId)
      this.timerId=null
    }
    if (this.flvPlayer !== null) {
        this.flvPlayer.pause();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
  },
  methods: {
    createVideo(){
      let that=this;
       if (that.flvPlayer) {
           that.flvPlayer.pause();
           that.flvPlayer.destroy();
           that.flvPlayer = null;
        }
         if (that.timerId !== null) {
              clearInterval(that.timerId);
            }
      that.videoElement = document.getElementById(that.id)
      if (flvjs.isSupported()) {
        that.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: that.src,
          isLive: true, 
        },{
            enableWorker: true, // 是否多线程工作
            enableStashBuffer: false, // 是否启用缓存
            stashInitialSize: 128, // 缓存大小(kb)  默认384kb
            autoCleanupSourceBuffer: true,
        })
      }
        that.flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
        // this.loadStatus=true
        // this.statusMsg="正在重连。。。"
        //视频出错后销毁重新创建
         if (that.flvPlayer) {
          that.flvPlayer.pause();
          that.flvPlayer.unload();
          that.flvPlayer.detachMediaElement();
          that.flvPlayer.destroy();
          that.flvPlayer= null;
        }
          that.createVideo();
      });
      
      that.flvPlayer.on("statistics_info", function (res) {
        if (that.lastDecodedFrame == 0) {
          that.lastDecodedFrame = res.decodedFrames;
          return;
        }
        if (that.lastDecodedFrame != res.decodedFrames) {
          that.lastDecodedFrame = res.decodedFrames;
        } else {
            that.lastDecodedFrame = 0;
            if (that.flvPlayer) {
              that.flvPlayer.pause();
              that.flvPlayer.unload();
              that.flvPlayer.detachMediaElement();
              that.flvPlayer.destroy();
              that.flvPlayer= null;
              that.createVideo();
          }
            
        }
      });

            that.flvPlayer.attachMediaElement(this.videoElement);

          
            that.flvPlayer.load();
            that.flvPlayer.play();
            

            if (that.timerId !== null) {
                 clearInterval(that.timerId);
            }
            that.timerId = setInterval(() => {
            
              if (that.flvPlayer.buffered.length) {
                let end = that.flvPlayer.buffered.end(0);//获取当前buffered值
                let diff = end - that.flvPlayer.currentTime;//获取buffered与currentTime的差值
                if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
                  that.flvPlayer.currentTime = that.flvPlayer.buffered.end(0);//手动跳帧
               }
              }
            }, 3000);
    },
    setsrc(){
    if(this.url){
    this.src =this.url;
    this.createVideo();
    }
  },
},
  props: {
    url:  {
        default: null,
        required: true,
        type: String
      },
  },
    watch: {
      url: {
        handler(newValue) {
        if(newValue != null){
          this.loadStatus=false
          this.src=newValue
          this.$nextTick(() => {
        this.setsrc();
      })
        }
        },
        deep: true,
        immediate: true,
      }
    },
}
</script>